<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<!--引入vue的js资源文件-->
		<script type="text/javascript" src="js/vue.min.js"></script>
		<!--引入axios的js资源文件-->
		<script type="text/javascript" src="js/axios.min.js" ></script>
		
		<script type="text/javascript" src="js/qs.js" ></script>
	</head>
	<body>
		<div id="app" style="margin: 0px auto; width: 300px; height: 400px; padding-top: 300px; border: solid">
			<input type="text" v-model="user.uname">
			<input type="password" v-model="user.upwd" />
			<button type="button" @click="login">点击</button>
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: '#app',
				data: {
					user: {
						uname: '',
						upwd: ''
					}
				},
				methods: {
					login: function() {
						var it = this;
						var str = Qs.stringify(it.user);
						alert(str)
						
						axios.get('user?'+str)
							.then(function(result) {
								console.log(result);
								alert(result);
								var data = result.data;
								console.log(data);
/*								//js中的跳转方式
								//window.location.href('')//在原页面进行跳转
								//window.open('')//在新页面进行打开
								//本地缓存, 存放在本地硬盘中，一个页面放入，所有页面共享*/
								window.localStorage.setItem("uid", data.id);//存放的是key/value
								window.localStorage.setItem("realname", data.realname);
/*								//window.localStorage.getItem()
								//window.localStorage.removeItem()*/
								window.location.href = "main.html";
								
								
							})
							.catch((error)=>{
								alert("网络异常！");
							})
					},
					
				}
			})
		</script>
	</body>
</html>
